<template>
  <div class="app-container">
    <div class="uploadInfo">
      <h3>{{ $t('operateStep') }}</h3>
      <div class="left" style="margin-top: 20px; padding: 0 60px 70px 70px; width: 80%">
        <el-steps :active="stepValue">
          <el-step :title="$t('warehouseStep.stepOne')" :description="$t('warehouseStep.stepOneDesc')" />
          <el-step :title="$t('warehouseStep.stepThreeNotSplit')" :description="$t('warehouseStep.stepThreeNotSplitDesc')" />
        </el-steps>
      </div>
    </div>
    <div class="goodsInfo">
      <div class="left" style="width: 80%">
        <h3>{{ $t('msgEnter') }}</h3>
        <el-form
          ref="form"
          :rules="rules"
          :model="queryParams"
          label-suffix=":"
          label-width="120px"
        >
          <el-form-item prop="" :label="$t('returnLang.returnDocNo')">
            <el-input
              ref="input"
              v-model.lazy="queryParams.returnNumber"
              :placeholder="$t('pleaseScan') + $t('returnLang.returnDocNo')"
              style="width: 40%"
              @keyup.enter.native="getByReturnNo"
            />
          </el-form-item>
          <el-form-item prop="packagingType" :label="$t('unitLang.weight') + $t('unitLang.size')">
            <el-table :data="queryParams.weightSizeData" border size="mini">
              <el-table-column
                prop="skuWeight"
                align="center"
                :label="$t('unitLang.weight') + '(KG)'"
                min-width="90"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.skuWeight'"
                    :rules="{
                      required: true,
                      message: $t('pleaseEnter'),
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model.number="scope.row.skuWeight"
                      type="number"
                      :placeholder="$t('pleaseEnter') + $t('unitLang.weight')"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="skuLength"
                align="center"
                :label="$t('unitLang.length') + '(CM)'"
                min-width="90"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.skuLength'"
                    :rules="{
                      required: true,
                      message: $t('pleaseEnter'),
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model.number="scope.row.skuLength"
                      type="number"
                      :placeholder="$t('pleaseEnter') + $t('unitLang.length')"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="skuWidth"
                align="center"
                :label="$t('unitLang.width') + '(CM)'"
                min-width="90"
              >
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.skuWidth'"
                    :rules="{
                      required: true,
                      message: $t('pleaseEnter'),
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model.number="scope.row.skuWidth"
                      type="number"
                      :placeholder="$t('pleaseEnter') + $t('unitLang.width')"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column
                prop="skuHeight"
                align="center"
                :label="$t('unitLang.height') + '(CM)'"
                min-width="90"
              >
                <template v-slot="scope">
                  <el-form-item
                    :prop="'weightSizeData.' + scope.$index + '.skuHeight'"
                    :rules="{
                      required: true,
                      message: $t('pleaseEnter'),
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model.number="scope.row.skuHeight"
                      type="number"
                      :placeholder="$t('pleaseEnter') + $t('unitLang.height')"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <!--          <el-form-item>-->
          <!--            <el-button type="primary">打印流转箱</el-button>-->
          <!--          </el-form-item>-->

        </el-form>
        <el-row type="flex" justify="start">
          <el-button
            type="primary"
            style="width: 20%; margin-left: 120px"
            :disabled="isSubmitDisabled"
            @click="handleSubmit"
          >{{ $t("submit") }}</el-button>
        </el-row>
      </div>
    </div>
    <div class="uploadInfo">
      <h3>{{ $t('backOrderLang.msgUp') }}</h3>
      <div style="margin-top: 20px; padding: 0 10px 50px 50px">
        <el-row type="flex" justify="start">
          <el-button type="primary" @click="handleUpload">{{
            $t("upload")
          }}</el-button>
          <el-button type="warning" plain @click="deleteSelectItem">{{
            $t("delete")
          }}</el-button>
        </el-row>
        <el-table
          ref="multipleTable"
          :data="uploadInfoData"
          tooltip-effect="dark"
          class="mt-10"
          border
          size="mini"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" min-width="20" />
          <el-table-column
            :label="$t('tableIndex')"
            align="center"
            type="index"
            width="55px"
          />
          <el-table-column
            :label="$t('returnLang.returnDocNo')"
            min-width="120"
            prop="returnNumber"
            align="center"
          />
          <el-table-column
            prop="skuWeight"
            :label="$t('unitLang.weight') + '(KG)'"
            min-width="120"
            align="center"
          />
          <el-table-column
            prop="skuLength"
            :label="$t('unitLang.length') + '(CM)'"
            min-width="120"
            align="center"
          />
          <el-table-column
            prop="skuWeight"
            :label="$t('unitLang.width') + '(CM)'"
            min-width="120"
            align="center"
          />
          <el-table-column
            prop="skuHeight"
            :label="$t('unitLang.height') + '(CM)'"
            min-width="120"
            align="center"
          />
          <el-table-column
            prop="operator"
            :label="$t('goodsSKULang.operator')"
            min-width="80"
            align="center"
          />
          <el-table-column
            prop="operationDate"
            :label="$t('operationDate')"
            min-width="80"
            align="center"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// import dayjs from 'dayjs'
import to from 'await-to-js'
import { packageTypeDict } from '@/utils/dictData'
import { getDictOptionList } from '@/utils/dictUtils'
import {
  getContainerByContainerCodeNew, returnEnterIndivide
} from '@/api/business/warehouseManage/warehousing'
import { getByReturnNo } from '@/api/business/operateManage/return'
import { scanFail, scanSuccess } from '@/utils/validate'
export default {
  data() {
    return {
      stepValue: 0,
      checked: false,
      userInfo: {
        userName: null,
        userId: null
      },
      containerId: null,
      skuId: null,
      readonly: true,
      containerDisabled: true,
      isSubmitDisabled: true,
      skuDisabled: true,
      queryParams: {
        originalBox: 0,
        returnNumber: '',
        containerCode: '',
        skuCode: null,
        skuNum: 0, // sku 入库数量
        weightSizeData: [] // 重量尺寸数据
      },
      tableData: [], // 装箱清单数据
      uploadInfoData: [], // 上传
      data: [], // 操作成功
      multipleSelection: [], // el-table多选选中的值
      packageTypeDict: packageTypeDict,
      packageTypeOptions: getDictOptionList(packageTypeDict),
      rules: {}
    }
  },
  created() {
    // console.log(new Date().toLocaleString()); //当前时间
    // console.log(this.$store.state.user.userMsg);
    this.userInfo = this.$store.state.user.userMsg
  },
  mounted() {
    this.$refs.input.focus()
  },
  methods: {
    changeBox(val) {
      this.queryParams.originalBox = +val
      console.log(this.queryParams.originalBox)
    },
    // 退件单号
    async getByReturnNo() {
      const { data } = await getByReturnNo({
        returnNo: this.queryParams.returnNumber,
        originalBox: 0
      })
      if (!data) {
        scanFail()
        this.$message.error(this.$t('returnLang.tip'))
        return
      }
      const skuInfo = {
        skuHeight: 0,
        skuLength: 0,
        skuWeight: 0,
        skuWidth: 0,
      }
      this.queryParams.weightSizeData = [skuInfo]
      this.stepValue = 1 // 步骤1
      this.skuDisabled = false
      this.containerDisabled = false
      scanSuccess()
      setTimeout(() => {
        this.$refs.containerCode.focus()
      }, 100)
    },
    // 扫描流转箱号
    async getContainerCodeInfo() {
      this.stepValue = 2 // 步骤2
      this.queryParams.skuCode = null
      const { data } = await getContainerByContainerCodeNew({
        containerCode: this.queryParams.containerCode
      })
      if (data.containerStatus === 1) {
        scanFail()
        this.$message.error(this.$t('warehousingLang.scanBoxTip'))
        return
      }
      this.queryParams.containerCode = data.containerCode
      this.containerId = data.containerId
      this.skuDisabled = false
      this.isSubmit = false
      this.isSubmitDisabled = false
      scanSuccess()
      setTimeout(() => {
        this.$refs.skuCode.focus()
      }, 100)
    },
    // 提交
    async handleSubmit() {
      this.stepValue = 3 // 步骤3
      const [err] = await to(this.$refs.form.validate())
      if (err === null) {
        for (let j = 0; j < this.queryParams.weightSizeData.length; j++) {
          // 重量
          if (this.queryParams.weightSizeData[0].skuWeight <= 0) {
            this.$message.error(this.$t('pleaseEnter') + this.$t('goodsSKULang.weight'))
            return
          }
          // 长
          if (this.queryParams.weightSizeData[0].skuLength <= 0) {
            this.$message.error(this.$t('pleaseEnter') + this.$t('goodsSKULang.length'))
            return
          }
          // 宽
          if (this.queryParams.weightSizeData[0].skuWidth <= 0) {
            this.$message.error(this.$t('pleaseEnter') + this.$t('goodsSKULang.width'))
            return
          }
          // 高
          if (this.queryParams.weightSizeData[0].skuHeight <= 0) {
            this.$message.error(this.$t('pleaseEnter') + this.$t('goodsSKULang.height'))
            return
          }
          this.uploadInfoData.push({
            containerCode: this.queryParams.containerCode,
            returnNo: this.queryParams.returnNumber,
            returnNumber: this.queryParams.returnNumber,
            skuCode: this.queryParams.weightSizeData[0].skuCode,
            skuHeight: this.queryParams.weightSizeData[0].skuHeight,
            skuLength: this.queryParams.weightSizeData[0].skuLength,
            skuNum: this.queryParams.skuNum,
            skuWeight: this.queryParams.weightSizeData[0].skuWeight,
            skuWidth: this.queryParams.weightSizeData[0].skuWidth,
            operationDate: new Date().toLocaleString(),
            operator: this.userInfo.userName
          })
          this.checked = false
          this.queryParams = {
            boxNumber: null,
            containerCode: null,
            skuCode: null,
            skuNum: 0,
            weightSizeData: []
          }
          this.containerDisabled = true
          this.skuDisabled = true
          return
        }
      } else {
        this.$message.error({
          message: this.$t('warehousingLang.pleaseComplete')
        })
      }
    },
    // 上传
    async handleUpload() {
      console.log(this.uploadInfoData, '1')
      if (this.multipleSelection.length > 0) {
        const res = await returnEnterIndivide({ enterReqList: this.uploadInfoData })
        if (res.returnCode === 10000) {
          this.$message({
            type: 'success',
            message: this.$t('warehousingLang.uploadSuccess')
          })
        }
        this.uploadInfoData = []
      } else {
        this.$message({
          type: 'warning',
          message: this.$t('pleaseSelect')
        })
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val)
    },
    // 删除
    deleteSelectItem() {
      console.log(this.multipleSelection)
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: this.$t('pleaseSelect')
        })
        return
      }
      this.$confirm(this.$t('delete') + '?', this.$t('hint'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          this.multipleSelection.forEach((value, index) => {
            this.uploadInfoData.forEach((v, i) => {
              if (
                value.boxNumber === v.boxNumber &&
                value.containerCode === v.containerCode &&
                value.skuCode === v.skuCode
              ) {
                this.uploadInfoData.splice(i, 1)
              }
            })
          })
          this.$message({
            type: 'success',
            message: this.$t('deleteSuccess')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('cancel')
          })
        })
    },
    changeToInputMode() {
      this.readonly = !this.readonly
    },
    changeToScanMode() {
      this.readonly = !this.readonly
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsInfo {
  display: flex;
  justify-content: space-between;
}
.active {
  color: red;
}
.el-input-scan {
  width: 40%;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  background-color: #f59a23;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 15px;
}
</style>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>
